<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <script src="plugs/vue/vue.js"></script>
    <meta name="format-detection" content="telephone=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="element-ui/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/style.css" />
    <style>
      .app {
        width: 100%;
        height: 100%;
      }
      .grapeBox {
        width: 30vw;
        height: 60vh;
        border: 1px solid red;
        margin: 0 auto;
        position: relative;
      }
      .grapeHead {
        width: 100%;
        height: 20%;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .grapeBody {
        width: 100%;
        height: 80%;
        position: absolute;
        top: 10%;
        left: 0;
      }
      .grapeBodyBox {
        width: 100%;
        height: 100%;
      }
      .row {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: center;
      }
      .col {
        width: 50px;
        height: 50px;
        background: #e976f8b2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div id="app" class="main" v-cloak>
      <div class="grapeBox">
        <div class="grapeHead">
          <img src="./images/grapeleaf.png" alt="" />
          <!-- <svg width="1320" height="800" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path
                id="svg_11"
                d="m800.46462,179.53478c0,0 94.41855,-45.11625 93.95345,-45.11626c0.4651,0.00001 14.8837,20.46511 14.4186,20.46511c0.4651,0 -108.37205,24.65115 -108.37205,24.65115z"
                stroke-opacity="null"
                stroke-width="1"
                stroke="#000"
                fill="#a8ce36"
              />
              <path
                id="svg_18"
                d="m748.37163,165.581298c0,0 -103.720869,43.255788 -104.185969,43.255786c0.4651,0.000002 -171.627822,144.185964 -172.09292,144.18596c0.465098,0.000004 216.278925,-78.139485 215.813824,-78.139488c0.465101,0.000003 77.209241,95.348784 76.74414,95.34878c0.465101,0.000004 97.674347,-94.418545 97.209244,-94.418548c0.465102,0.000003 236.744033,99.999944 236.278928,99.99994c0.465105,0.000004 -179.999905,-163.72083 -179.999905,-163.72083c0,0 -169.767342,-46.511601 -169.767342,-46.511601z"
                stroke-opacity="null"
                stroke-width="1"
                stroke="#000"
                fill="#a8ce36"
              />
            </g>
          </svg> -->
        </div>
        <div class="grapeBody" style="z-index: 5">
          <div class="grapeBodyBox">
            <div class="row" v-for="(item,index) in rowList">
              <div
                class="col"
                v-for="(it,i) in item.colList"
                :style="{background:it.isBelate==true?'#ebd6edb2':''}"
              >
                {{it.day}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      //   1.先判断年份是闰年还是平年，闰年2月29天，平年2月28天
      // 	 2.判断月份是大月还是小月————1，3，5，7，8，10，12为大月31天————4，6，9，11为小月30天
      var vm = new Vue({
        el: "#app",
        data: function () {
          return {
            isRun: false, //闰年2月29天，平年2月28天
            rowList: [],
          };
        },
        methods: {
          getDate() {
            let now = new Date();
            let nowYear = now.getFullYear();
            let nowMonth = now.getMonth() + 1;
            let nowDay = now.getDate();
            // 大小月判断
            if (
              (nowMonth == 1 ||
                nowMonth == 3 ||
                nowMonth == 5 ||
                nowMonth == 7 ||
                nowMonth == 8 ||
                nowMonth == 10 ||
                nowMonth == 12) &&
              nowMonth != 2
            ) {
              console.log("这里不是2月，是大月31天");
              this.rowList = [
                {
                  colList: [
                    { day: 31, isBelate: false },
                    { day: 30, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 29, isBelate: false },
                    { day: 28, isBelate: true },
                    { day: 27, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 26, isBelate: false },
                    { day: 25, isBelate: false },
                    { day: 24, isBelate: false },
                    { day: 23, isBelate: false },
                    { day: 22, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 21, isBelate: false },
                    { day: 20, isBelate: false },
                    { day: 19, isBelate: false },
                    { day: 18, isBelate: false },
                    { day: 17, isBelate: false },
                    { day: 16, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 15, isBelate: false },
                    { day: 14, isBelate: false },
                    { day: 13, isBelate: false },
                    { day: 12, isBelate: false },
                    { day: 11, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 10, isBelate: false },
                    { day: 9, isBelate: false },
                    { day: 8, isBelate: false },
                    { day: 7, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 6, isBelate: false },
                    { day: 5, isBelate: false },
                    { day: 4, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 3, isBelate: false },
                    { day: 2, isBelate: false },
                  ],
                },
                { colList: [{ day: 1, isBelate: false }] },
              ];
            } else if (
              nowMonth != 2 &&
              (nowMonth == 4 ||
                nowMonth == 6 ||
                nowMonth == 9 ||
                nowMonth == 11)
            ) {
              console.log("这里不是2月，是小月30天");
              this.rowList = [
                {
                  colList: [
                    { day: 30, isBelate: false },
                    { day: 29, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 28, isBelate: false },
                    { day: 27, isBelate: false },
                    { day: 26, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 25, isBelate: false },
                    { day: 24, isBelate: false },
                    { day: 23, isBelate: false },
                    { day: 22, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 21, isBelate: false },
                    { day: 20, isBelate: false },
                    { day: 19, isBelate: false },
                    { day: 18, isBelate: false },
                    { day: 17, isBelate: false },
                    { day: 16, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 15, isBelate: false },
                    { day: 14, isBelate: false },
                    { day: 13, isBelate: false },
                    { day: 12, isBelate: false },
                    { day: 11, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 10, isBelate: false },
                    { day: 9, isBelate: false },
                    { day: 8, isBelate: false },
                    { day: 7, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 6, isBelate: false },
                    { day: 5, isBelate: false },
                    { day: 4, isBelate: false },
                  ],
                },
                {
                  colList: [
                    { day: 3, isBelate: false },
                    { day: 2, isBelate: false },
                  ],
                },
                { colList: [{ day: 1, isBelate: false }] },
              ];
            }

            // 2月润平年判断
            if (
              (nowYear % 4 == 0 && nowYear % 100 != 0) ||
              nowYear % 400 == 0
            ) {
              // 这里是闰年的2月，有29天
              if (nowMonth == 2) {
                console.log("这里是2月，闰年的，29天");
                this.rowList = [
                  {
                    colList: [
                      { day: 29, isBelate: false },
                      { day: 28, isBelate: false },
                      { day: 27, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: false },
                      { day: 25, isBelate: false },
                      { day: 24, isBelate: false },
                      { day: 23, isBelate: false },
                      { day: 22, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: false },
                      { day: 20, isBelate: false },
                      { day: 19, isBelate: false },
                      { day: 18, isBelate: false },
                      { day: 17, isBelate: false },
                      { day: 16, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: false },
                      { day: 14, isBelate: false },
                      { day: 13, isBelate: false },
                      { day: 12, isBelate: false },
                      { day: 11, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: false },
                      { day: 9, isBelate: false },
                      { day: 8, isBelate: false },
                      { day: 7, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: false },
                      { day: 5, isBelate: false },
                      { day: 4, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: false },
                      { day: 2, isBelate: false },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: false }] },
                ];
              }
            } else {
              // 这里是平年的2月，只有28天
              if (nowMonth == 2) {
                console.log("这里是2月，平年的，28天");
                this.rowList = [
                  {
                    colList: [
                      { day: 28, isBelate: false },
                      { day: 27, isBelate: false },
                      { day: 26, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 25, isBelate: false },
                      { day: 24, isBelate: false },
                      { day: 23, isBelate: false },
                      { day: 22, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: false },
                      { day: 20, isBelate: false },
                      { day: 19, isBelate: false },
                      { day: 18, isBelate: false },
                      { day: 17, isBelate: false },
                      { day: 16, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: false },
                      { day: 14, isBelate: false },
                      { day: 13, isBelate: false },
                      { day: 12, isBelate: false },
                      { day: 11, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: false },
                      { day: 9, isBelate: false },
                      { day: 8, isBelate: false },
                      { day: 7, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: false },
                      { day: 5, isBelate: false },
                      { day: 4, isBelate: false },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: false },
                      { day: 2, isBelate: false },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: false }] },
                ];
              }
            }
          },
        },
        mounted: function () {
          this.getDate();
        },
      });
    </script>
  </body>
</html>
